<template>
  <div class="place">
    <van-nav-bar style="background-color: #DBECFE;" left-arrow :title="title" @click-left="emit('back')" />
    <div class="imgList" v-for="(item,key) in addrList">
      <p class="imgTime">{{ key }}</p>
      <div class="imgItem" v-for="ite in item">
        <van-image radius="6px" width="80" height="80" :src=getImgUrl(ite) @click = "showImage(ite)"/>
<!--        <span class="title">地点</span>-->
      </div>
    </div>
  </div>
  <van-image-preview v-model:show = "show" :images="preImages" double-scale>
  </van-image-preview>
</template>

<script setup>

import {showImagePreview} from 'vant'
import {ref, reactive, onMounted, onUnmounted, watch} from 'vue'
import {getCityByTimeSort, getImgUrl} from "@/api/index.js";
const emit = defineEmits(['back'])
const show = ref(false)
const preImages = []
const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})
const addrList = ref([])
onMounted(async()=>{
  const response = await getCityByTimeSort(props.title)
  addrList.value = response.data
})

watch(() => props.title,async () => {
  const response = await getCityByTimeSort(props.title)
  addrList.value = response.data
})



const showImage = (item) =>{
  showImagePreview({
    images:[getImgUrl(item)],
    closeable: true,
    showIndex: false,
  })
}

// watch(() => props.title,async () => {
//   console.log("1111111111")
//   console.log(props.title)
// })
</script>

<style lang="scss" scoped>
.place {
  background-color: #DBECFE;
  width: 100%;
  height: 100%;
  padding: 16px;

  .imgList {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15px;

    .imgTime {
      width: 100%;
      font-size: 14px;
      margin-top: 10px;
      margin-bottom: 5px;
    }

    .imgItem {
      position: relative;
      width: 25%;

      .title {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        left: 50%;
        transform: translateX(-50%);
        color: #fff;
        font-size: 12px
      }
    }
  }
}
</style>
